import { ExternalLink } from 'lucide-react';
import type { Metadata } from 'next';
import Link from 'next/link';
import { permanentRedirect } from 'next/navigation';
import { CompareButton } from '@/components/compare/compare-button';
import { CompareTrayBar } from '@/components/compare/compare-tray-bar';
import { RelationsBlock, SourcesTable, TimelineList } from '@/components/entity/blocks';
import { buildMetadata, loadEntity } from '@/components/entity/load';
import { Methodology } from '@/components/intelligence/bits';
import { ExpandableOfferRow } from '@/components/intelligence/expand-price-row';
import { ViewBeacon } from '@/components/layout/view-beacon';
import { PriceMovers } from '@/components/prices/movers';
import { ProviderStrip } from '@/components/providers/provider-strip';
import { Chip, EntityBadge, StatusBadge } from '@/components/ui/badges';
import { DataTable, EmptyRow, Td, Th } from '@/components/ui/data-table';
import { EntityLink, QualityMark } from '@/components/ui/entity';
import { KeyValue } from '@/components/ui/key-value';
import { SourceCell } from '@/components/ui/provenance';
import { Container, Note, Section } from '@/components/ui/section';
import { EmptyState, Unavailable } from '@/components/ui/unavailable';
import { WatchButton } from '@/components/watchlist/watch-button';
import { api, intel, safe } from '@/lib/api';
import { fmtAgo, fmtDate, fmtInt, fmtTokens, fmtUsdPerM, num } from '@/lib/format';
import { PROSE_KEYS, routes, SITE_NAME, SITE_URL } from '@/lib/site';
import type { Deployment } from '@/lib/types';

export const revalidate = 300;
type Params = { params: Promise<{ slug: string }> };
const FEATURE_LABELS: Record<string, string> = { batch: 'Batch', cached: 'Prompt caching', fine_tuning: 'Fine-tuning', audio: 'Audio', image: 'Image', video: 'Video', web_search: 'Web search', flex: 'Flex tier', long_context: 'Long-context tier', priority: 'Priority tier' };

export async function generateMetadata({ params }: Params): Promise<Metadata> {
  const { slug } = await params;
  const d = await safe(api.entityOfType('providers', slug));
  if (!d || d.entity_type !== 'provider') return { title: 'Provider', robots: { index: false } };
  const m = buildMetadata(d);
  return { ...m, title: `${d.name} — models served, prices per 1M tokens, price history`, description: `${d.name}${d.organization ? ` (${d.organization.name})` : ''}: every model it currently serves with published input, output, cached and batch prices per 1M tokens, context windows, price distributions, listings, delistings and price change events — each with its source. ${SITE_NAME}.` };
}

export default async function ProviderPage({ params }: Params) {
  const { slug } = await params;
  const d = await loadEntity('providers', slug);
  const canonical = routes.entity(d);
  if (canonical !== `/providers/${encodeURIComponent(slug)}`) permanentRedirect(canonical);
  const since = Date.now() - 30 * 86400000;
  const [providers, current, closed, priceEvents] = await Promise.all([safe(intel.providers()), safe(intel.deployments({ provider: d.slug, limit: 200, sort: 'model' })), safe(intel.deployments({ provider: d.slug, current: 0, limit: 200, sort: 'valid_from' })), safe(api.changes({ type: 'PRICE_CHANGED', limit: 200 }))]);
  const row = providers?.items.find((p) => p.slug === d.slug) ?? null;
  const deployments: Deployment[] = current?.items ?? [];
  const added = deployments.filter((x) => new Date(x.valid_from).getTime() >= since).sort((a, b) => b.valid_from.localeCompare(a.valid_from));
  const removed = (closed?.items ?? []).filter((x) => x.status === 'delisted' || x.valid_to).sort((a, b) => (b.valid_to ?? '').localeCompare(a.valid_to ?? ''));
  const events = (priceEvents?.items ?? []).filter((e) => e.meta?.provider_id === d.id || e.meta?.provider === d.name);
  const orgs = [...new Map(deployments.filter((x) => x.model.organization).map((x) => [x.model.organization!.slug, x.model.organization!])).values()].sort((a, b) => a.name.localeCompare(b.name));
  const featureKeys = row?.feature_keys ?? [...new Set(deployments.flatMap((x) => Object.keys(x.features ?? {}).concat(Object.keys(x.prices.native_units ?? {}))))].sort();
  const a = d.attributes ?? {};
  const specRows = Object.keys(a)
    .filter((k) => !PROSE_KEYS.has(k))
    .map((k) => ({ key: k, raw: a[k] }));
  const ld = {
    '@context': 'https://schema.org',
    '@type': 'Organization',
    name: d.name,
    url: typeof a.website === 'string' ? a.website : undefined,
    description: d.description ?? undefined,
    parentOrganization: d.organization ? { '@type': 'Organization', name: d.organization.name } : undefined,
    mainEntityOfPage: `${SITE_URL}${canonical}`,
  };

  return (
    <Container wide>
      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(ld) }} />
      <ViewBeacon path={canonical} />
      <header className="pb-5 pt-7 md:pt-10">
        <div className="flex flex-wrap items-center gap-2 text-sm text-ink-3">
          <Link href={routes.providers()} className="hover:text-ink">Providers</Link> <span aria-hidden>/</span>
          <EntityBadge type={d.entity_type} />
          <StatusBadge status={d.status} />
        </div>
        <div className="mt-2 flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
          <div className="min-w-0">
            <h1 className="display text-[28px] md:text-[40px]">{d.name}</h1>
            <p className="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 text-sm text-ink-2">
              {d.organization && (
                <Link href={routes.entity({ entity_type: 'company', slug: d.organization.slug })} className="hover:text-accent">
                  Operated by {d.organization.name}
                </Link>
              )}
              {typeof a.website === 'string' && (
                <a href={a.website} target="_blank" rel="noopener noreferrer" className="inline-flex items-center gap-1 hover:text-accent">
                  {a.website.replace(/^https?:\/\/(www\.)?/, '').replace(/\/$/, '')} <ExternalLink className="size-3" aria-hidden />
                </a>
              )}
              {typeof a.pricing_url === 'string' && (
                <a href={a.pricing_url} target="_blank" rel="noopener noreferrer" className="inline-flex items-center gap-1 hover:text-accent">
                  pricing page <ExternalLink className="size-3" aria-hidden />
                </a>
              )}
              <QualityMark q={d.quality?.score} label />
            </p>
            {d.description && <p className="mt-3 max-w-2xl text-[15px] leading-relaxed text-ink-2">{d.description}</p>}
          </div>
          <div className="flex shrink-0 flex-wrap items-center gap-2">
            <CompareButton e={d} />
            <WatchButton e={d} />
            <Link href={routes.graph(d.slug)} className="inline-flex h-9 items-center border border-rule px-2.5 text-sm text-ink-2 hover:border-rule-strong hover:text-ink">
              Explore graph
            </Link>
          </div>
        </div>
      </header>

      {row ? <ProviderStrip p={row} note={providers?.note} /> : <Unavailable what="Provider aggregates" compact />}

      {/* ---------------------------------------------------------------------------------------- models served */}
      <Section eyebrow="Models served" title={`${fmtInt(current?.total ?? deployments.length)} current deployments`} lede="One row per model × provider model id, as published. Expand a row to load its full price history as a step chart." action={{ href: `${routes.prices()}?provider=${encodeURIComponent(d.slug)}`, label: 'In the price terminal' }} hairline={false}>
        {!current ? (
          <Unavailable what="Deployments" />
        ) : deployments.length === 0 ? (
          <EmptyState title="No current deployment recorded">The pricing page has not yielded a priced model row yet.</EmptyState>
        ) : (
          <DataTable scroll compact>
            <thead>
              <tr>
                <Th>Model</Th>
                <Th>Provider model id</Th>
                <Th num>Context</Th>
                <Th num>Input / 1M</Th>
                <Th num>Output / 1M</Th>
                <Th num>Cached in</Th>
                <Th num>Batch in / out</Th>
                <Th>Status</Th>
                <Th>Observed</Th>
                <Th>Source</Th>
                <Th className="w-24" aria-label="History" />
              </tr>
            </thead>
            <tbody>
              {deployments.map((x) => (
                <ExpandableOfferRow key={x.id} model={x.model.slug} provider={d.slug} colSpan={10} mode="step">
                  <Td primary>
                    <EntityLink e={x.model} />
                    {x.model.organization && <span className="ml-2 text-xs text-ink-3">{x.model.organization.name}</span>}
                  </Td>
                  <Td label="Provider model id" className="mono text-[11px] text-ink-2">{x.provider_model_id ?? '—'}</Td>
                  <Td num label="Context" className="tnum text-ink-2">{fmtTokens(x.context_length)}</Td>
                  <Td num label="Input / 1M" className="tnum text-accent-2">{fmtUsdPerM(x.prices.input)}</Td>
                  <Td num label="Output / 1M" className="tnum text-accent-2">{fmtUsdPerM(x.prices.output)}</Td>
                  <Td num label="Cached in" className="tnum text-ink-2">{fmtUsdPerM(x.prices.cached_input)}</Td>
                  <Td num label="Batch" className="tnum text-ink-2">{num(x.prices.batch_input) === null && num(x.prices.batch_output) === null ? <span className="text-ink-3">—</span> : `${fmtUsdPerM(x.prices.batch_input)} / ${fmtUsdPerM(x.prices.batch_output)}`}</Td>
                  <Td label="Status"><StatusBadge status={x.status} /></Td>
                  <Td label="Observed" className="text-ink-2 whitespace-nowrap" title={x.observed_at}>{fmtAgo(x.observed_at)}</Td>
                  <Td label="Source"><SourceCell url={x.source_url} tier={x.tier} /></Td>
                </ExpandableOfferRow>
              ))}
              {deployments.length === 0 && <EmptyRow cols={11} />}
            </tbody>
          </DataTable>
        )}
        {current && current.total > deployments.length && <Note className="mt-2">Showing the first {fmtInt(deployments.length)} of {fmtInt(current.total)} deployments — the rest are in the <Link href={`${routes.prices()}?provider=${encodeURIComponent(d.slug)}`} className="link">price terminal</Link>.</Note>}
      </Section>

      {/* ----------------------------------------------------------------------------------- added / removed */}
      <Section eyebrow="Listings · 30 days" title="Models added and removed">
        <div className="grid grid-cols-[minmax(0,1fr)] gap-8 md:grid-cols-2">
          <div>
            <p className="flex items-baseline justify-between text-sm">
              <span className="font-medium text-ink">Added</span>
              <span className="tnum text-ink-3">{fmtInt(row?.models_added_30d ?? added.length)}</span>
            </p>
            {added.length ? (
              <ul className="mt-2 border-t border-rule">
                {added.slice(0, 12).map((x) => (
                  <li key={x.id} className="flex flex-wrap items-baseline gap-x-3 border-b border-rule py-2 text-sm">
                    <EntityLink e={x.model} />
                    <span className="tnum ml-auto text-xs text-ink-3">{fmtDate(x.valid_from)}</span>
                  </li>
                ))}
                {added.length > 12 && <li className="py-2 text-xs text-ink-3">+{added.length - 12} more in the table above.</li>}
              </ul>
            ) : (
              <p className="mt-2 text-sm text-ink-3">No listing opened in the last 30 days.</p>
            )}
          </div>
          <div>
            <p className="flex items-baseline justify-between text-sm">
              <span className="font-medium text-ink">Removed</span>
              <span className="tnum text-ink-3">{fmtInt(row?.models_removed_30d ?? removed.length)}</span>
            </p>
            {removed.length ? (
              <ul className="mt-2 border-t border-rule">
                {removed.slice(0, 12).map((x) => (
                  <li key={x.id} className="flex flex-wrap items-baseline gap-x-3 border-b border-rule py-2 text-sm">
                    <EntityLink e={x.model} />
                    <Chip>{x.status}</Chip>
                    <span className="tnum ml-auto text-xs text-ink-3">{fmtDate(x.valid_to)}</span>
                  </li>
                ))}
              </ul>
            ) : (
              <p className="mt-2 text-sm text-ink-3">No delisting recorded — a model that disappears from the pricing page is closed (valid_to) and listed here.</p>
            )}
          </div>
        </div>
      </Section>

      {/* ------------------------------------------------------------------------------------- price events */}
      <Section eyebrow="Price events" title={`Price changes · ${fmtInt(row?.price_changes_30d ?? events.length)} in 30 days`} lede="PRICE_CHANGED events where this provider is the source of the price." action={{ href: `${routes.changes()}?type=PRICE_CHANGED`, label: 'All price events' }}>
        {!priceEvents ? <Unavailable what="Price events" /> : <PriceMovers movers={events} limit={50} />}
      </Section>

      {/* ---------------------------------------------------------------------------------- features & limits */}
      <Section eyebrow="Features & limits" title="What this provider prices and publishes">
        <div className="grid grid-cols-[minmax(0,1fr)] gap-8 lg:grid-cols-[minmax(0,1fr)_minmax(0,1.2fr)]">
          <div>
            <p className="eyebrow mb-1.5">Priced features</p>
            {row?.features_supported?.length ? (
              <ul className="flex flex-wrap gap-1.5">
                {row.features_supported.map((f) => (
                  <li key={f}>
                    <Chip tone="accent">{FEATURE_LABELS[f] ?? f.replace(/_/g, ' ')}</Chip>
                  </li>
                ))}
              </ul>
            ) : (
              <p className="text-sm text-ink-3">No priced feature beyond input/output tokens recorded.</p>
            )}
            {featureKeys.length > 0 && (
              <>
                <p className="eyebrow mb-1.5 mt-4">Native price keys observed</p>
                <ul className="mono flex flex-wrap gap-1 text-[11px] text-ink-2">
                  {featureKeys.map((k) => (
                    <li key={k} className="rounded-[3px] bg-surface-2 px-1.5 py-[1px]">
                      {k}
                    </li>
                  ))}
                </ul>
                <Note className="mt-1.5">Provider-specific units (per 1K requests, per minute, per image…) are kept verbatim in each offer&apos;s native_units and are not converted.</Note>
              </>
            )}
            <p className="eyebrow mb-1.5 mt-4">Organizations covered</p>
            {orgs.length ? (
              <ul className="flex flex-wrap gap-1.5">
                {orgs.map((o) => (
                  <li key={o.slug}>
                    <Link href={routes.entity({ entity_type: 'company', slug: o.slug })} className="inline-flex h-7 items-center border border-rule px-2 text-xs text-ink-2 hover:border-rule-strong hover:text-ink">
                      {o.name}
                    </Link>
                  </li>
                ))}
              </ul>
            ) : (
              <p className="text-sm text-ink-3">—</p>
            )}
          </div>
          <div>
            <p className="eyebrow mb-1.5">Published attributes</p>
            <KeyValue rows={specRows} provenance={d.provenance} slug={d.slug} entity={{ name: d.name, entity_type: d.entity_type }} dense />
          </div>
        </div>
        <Methodology text={providers?.note} />
      </Section>

      {d.relations?.length ? (
        <Section eyebrow="Relations" title="In the graph" action={{ href: routes.graph(d.slug), label: 'Explore graph' }}>
          <RelationsBlock relations={d.relations} exclude={['available_through']} />
        </Section>
      ) : null}
      <Section eyebrow="Timeline" title="Events" action={{ href: routes.timeline({ entity: d.slug }), label: 'Full timeline' }}>
        <TimelineList events={d.timeline ?? []} slug={d.slug} />
      </Section>
      <Section eyebrow="Sources" title="Where these facts come from">
        <SourcesTable sources={d.sources ?? []} />
      </Section>
      <CompareTrayBar />
    </Container>
  );
}